<template>
  <div class="memberList h100 w100">
    <el-row class="h100" :gutter="20">
      <el-col :span="16" class="h100 border">
        <el-input
          v-if="isSeleteName"
          placeholder="输入关键字过滤"
          size="mini"
          class="tableInput"
          v-model="userName"
        ></el-input>
        <div style="height:calc(100% - 38px)">
          <el-table
            :data="tableConfig.data"
            highlight-current-row
            :header-cell-style="headerStyle"
            ref="gridData"
            @select="(s, r) => select(s, r)"
            @select-all="selectAll"
            @row-dblclick="selectOne"
            height="100%"
            border
          >
            <!-- calc(100% - 36px) -->
            <el-table-column v-if="tableConfig.radio" label="-" width="55">
              <template slot-scope="scope">
                <el-radio
                  v-model="radioCheck"
                  :label="scope.row.id"
                  @change="(i) => radioSelect(scope.row)"
                >
                  <i></i>
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column v-else type="selection" width="55" :selectable="checkSelect"></el-table-column>
            <template v-for="(item, index) in tableConfig.column">
              <el-table-column
                :label="item.label"
                :min-width="item.width"
                :prop="item.prop"
                :key="index"
                align="center"
              ></el-table-column>
            </template>
          </el-table>
        </div>

        <div v-if="this.totalNumber" class="table-pagination">
          <el-pagination
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryObj.page"
            :page-sizes="[15, 30, 50, 100]"
            :page-size="queryObj.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalNumber"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="8" class="h100 border">
        <div v-for="(i, index) in hadChoseData" :key="index" class="chosedSelect">
          <label>{{ i[tableConfig.column[0].prop] }}</label>
          <i @click="delItem(index, i)" class="el-icon-circle-close select-icon-close"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  queryUserList, //查询用户
  getOrgList //查询组织
} from "@/api/common";
export default {
  props: {
    selectConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chosedData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isSeleteName: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      totalNumber: 0,
      radioCheck: null,
      tableConfig: {
        radio: true,
        data: [],
        column: []
      }, //待选列表设置
      hadChoseData: [], //已选数据
      userName: "",
      maxSelectNum: 0
    };
  },
  created() {
    this.init();
  },
  watch: {
    userName(val) {
      this.$emit("searchUserName", val);
    },
    "tableConfig.data": {
      handler(val) {
        this.checkData();
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.hadChoseData = [...this.chosedData];
      let { radio, data, column, maxSelectNum } = this.selectConfig;
      this.maxSelectNum = maxSelectNum || 0;
      this.tableConfig = Object.assign({}, this.tableConfig, {
        radio,
        data,
        column
      });
    },
    headerStyle() {
      return {
        borderRight: "none"
      };
    },
    //点击移除的时候触发
    delItem(index, row) {
      this.hadChoseData.splice(index, 1);
      this.tableConfig.data.map(item => {
        if (item.id === row.id) {
          this.$refs.gridData.toggleRowSelection(item, false);
        }
      });
      this.radioCheck = null;
    },
    //全选
    selectAll(selection) {
      let arr = [];
      if (selection.length) {
        [...selection].map(x => {
          if ([...this.hadChoseData].every(y => y.id !== x.id)) {
            this.hadChoseData.push({
              ...x
            });
          }
        });
      } else {
        this.hadChoseData = [...this.hadChoseData].filter(x =>
          [...this.tableConfig.data].every(y => y.id !== x.id)
        );
      }
    },
    //多选选中时触发
    async select(selection, row) {
      let rowIndex = -1;
      //判断这一行是否已经选中
      this.hadChoseData.map((i, index) => {
        if (i.id === row.id) {
          rowIndex = index;
        }
      });
      if (rowIndex != -1) {
        //如果存在
        this.hadChoseData.splice(rowIndex, 1);
      } else {
        //如果不存在
        if (this.maxSelectNum != 0) {
          //只选一个时
          if (this.maxSelectNum == 1) {
            if (selection.length > 1) {
              this.$message.warning(
                "选择的节点树不得大于限定数量" + this.maxSelectNum + "个！"
              );
              //选中大于一个
              this.$refs.gridData.toggleRowSelection(row, false);
            } else {
              this.hadChoseData = [row];
              this.$refs.gridData.toggleRowSelection(row, true);
            }
            //多选选择个数限制
          } else {
            if (this.hadChoseData.length + 1 > this.maxSelectNum) {
              let num = this.maxSelectNum - this.chosedData.length;
              this.$refs.gridData.toggleRowSelection(selection[num], false);
              this.$message.warning(
                "选择的节点树不得大于限定数量" + this.maxSelectNum + "个！"
              );
            } else {
              this.hadChoseData.push({
                ...row
              });
            }
          }
        } else {
          this.hadChoseData.push({
            ...row
          });
        }
      }
    },
    //禁用复选框
    checkSelect(row, inde) {
      return !row.disabled;
    },
    //比对选中的数据，并为其勾选
    checkData() {
      this.$nextTick(() => {
        [...this.tableConfig.data].map(x => {
          if ([...this.hadChoseData].some(y => y.id == x.id)) {
            this.$refs.gridData.toggleRowSelection(x, true);
            this.radioCheck = x.id;
          }
        });
        /**如果单选,默认选择第一个 */
        if (this.tableConfig.radio && this.tableConfig.data.length) {
          let obj = this.tableConfig.data[0];
          this.radioCheck = obj.id;
          this.radioSelect(obj);
        }
      });
    },
    //单选框选中时触发
    radioSelect(row) {
      let arr = [];
      arr.push(Object.assign({}, row));
      this.hadChoseData = [...arr];
    },
    //双击表单触发行选中
    selectOne(row, column) {
      if (this.tableConfig.radio) {
        //单选
        this.radioCheck = row.id;
        this.radioSelect(row);
      } else {
        //多选
        if (!row.disabled) {
          //可选
          if (this.maxSelectNum != 0) {
            //多选有个数限制时
            if (this.maxSelectNum == 1) {
              //多选只能选一个时
              //将最后选中的替换掉之前选中的；
              if (this.hadChoseData.length > 0) {
                this.$message.warning(
                  "选择的节点树不得大于限定数量" + this.maxSelectNum + "个！"
                );
                //选中大于一个
                // this.$refs.gridData.toggleRowSelection(row, false);
              } else {
                this.$refs.gridData.toggleRowSelection(row, true);
                this.hadChoseData = [row];
              }
            } else {
              //多选可以选多个时
              if (this.hadChoseData.length + 1 > this.maxSelectNum) {
                let num = this.maxSelectNum - this.chosedData.length;
                this.$message.warning(
                  "选择的节点树不得大于限定数量" + this.maxSelectNum + "个！"
                );
              } else {
                this.doubleClickSetData(row);
              }
            }
          } else {
            this.doubleClickSetData(row);
          }
        }
      }
    },
    //双击设置选中数据
    doubleClickSetData(row) {
      this.$refs.gridData.toggleRowSelection(row);
      this.select([], row);
    },
    //返回选择的数据
    getSeleteData() {
      let data = JSON.parse(JSON.stringify(this.hadChoseData));
      return data;
    },
    //设置数据
    setTableData(data) {
      this.tableConfig.data = [...data];
    },
    setTotal(total) {
      this.totalNumber = total;
    },
    handleSizeChange(val) {
      this.queryObj.page = 1;
      this.queryObj.pageSize = val;
      this.$emit("searchUserName");
    },
    handleCurrentChange(val) {
      this.queryObj.page = val;
      this.$emit("searchUserName");
    },
    getQueryParams() {
      return {
        userName: this.userName,
        page: this.queryObj.page,
        pageSize: this.queryObj.pageSize
      };
    }
  }
};
</script>
<style  lang="less" scoped>
.memberList {
  .tableInput {
    width: 50%;
    padding: 4px;
  }
}
.had-chosed-list {
  overflow: auto;
}

.chosedSelect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  line-height: 23px;
}
.select-icon-close {
  cursor: pointer;
}
.border {
  border: 1px solid #ebebeb;
}
</style>